<template>
  <div class="containers">
    <div class="container_inner">
      <h1>后台管理系统</h1>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item class="item" label="用户名" prop="user">
          <el-input
            type="text"
            maxlength="6"
            v-model="ruleForm.user"
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label="验证码" prop="text">
          <el-input
            type="text"
            v-model="ruleForm.text"
            autocomplete="off"
          ></el-input>
          <img class="imgUrl" @click="onImngUrl" :src="imgUrl" alt="" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 引入uuid
import { v4 as uuidv4 } from 'uuid'
// 引入登陆接口
import { Login } from '@/api/User.js'
export default {
  name: 'LoginG',
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var checkText = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('验证码未输入'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        user: '',
        pass: '',
        text: ''
      },
      rules: {
        user: [{ validator: validateUser, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }],
        text: [{ validator: checkText, trigger: 'blur' }]
      },
      uuid: '',
      imgUrl: `https://www.chengzier.cn:8000/api/generateimagecode?uuid=${this.uuid}`
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.computelen()
          Login({
            username: this.ruleForm.user,
            password: this.ruleForm.pass,
            uuid: this.uuid,
            text: this.ruleForm.text
          }).then((res) => {
            if (res.data.status == 'error') {
              this.$message.error(res.data.msg)
            } else {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
              localStorage.setItem('tt', res.data.token)
              this.$store.commit('getToken', res.data.token)
              // 跳转首页
              this.$router
                .replace({
                  path: '/'
                })
                .catch(() => {})
            }
          })
        } else {
          console.log('登陆失败')
          return false
        }
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 新的uuid
    getImgUrl() {
        this.uuid = uuidv4()
        this.imgUrl = `https://www.chengzier.cn:8000/api/generateimagecode?uuid=${this.uuid}`
    },
    // 点击更换验证码
    onImngUrl() {
      this.getImgUrl()
    },
    // 将验证码小写转为大写
    computelen() {
      this.ruleForm.text = this.ruleForm.text.toUpperCase()
    }
  },
  // 挂载后调用一次uuid
  mounted() {
    this.getImgUrl()
  }
}
</script>

<style>
.containers {
  width: 100%;
  height: 100vh;
  background-color: #409eff;
  text-align: center;
}

.container_inner {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  transform: translate(-50%, -50%);
  border-radius: 15px;
}

h1 {
  color: #636363;
  margin: 50px 0;
}

.item {
  display: flex;
  margin-left: 100px;
}

.item .el-form-item__label {
  width: 55px;
}

.item .el-form-item__content {
  width: 200px;
  margin-left: 20px;
}

.item .el-form-item__content:nth-child(3) {
  width: 50px;
  margin-left: 20px;
}

.el-form-item__label .el-form-item__content {
  margin-left: 0 ;
}

.imgUrl {
  width: 100px;
  height: 40px;
  position: absolute;
  right: -110px;
}
</style>